{% extends "director/index.html" %}
{% load static %}
{% load jsonify %}

{% block page_content %}

<script type="text/javascript">

    heads={{ heads | jsonify }}
    row = {{ row | jsonify }}
//    permits={{permits | jsonify }}
    model_permits = {{ model_permits | jsonify}}
    permit_heads={{permit_heads | jsonify}}
    errors={}

//    ex.each(heads,function(head){
//        head.readonly=true
//    })
    $(function () {
        haha= new Vue({
            el:'#there',
            data:{
                menu:menu,
                permit_heads:permit_heads,
                selected_heads:[],
//                permits: permits?permits:{},
                permits:row.permit,
                sld_md_name:'',
                heads:heads,
                row:row,
                kw:{
                    heads:heads,
                    row:row,
                    errors:{},
                }
            },
            mixins:[field_fun],
            mounted: function(){
                var self=this
                this.selected_heads=ex.remove(this.permit_heads,function (head) {
                    return self.permits[head.name]
                })
            },
            methods:{
                get_head:function(name){
                    return ex.findone(this.heads,{name:name})
                },
                add_permit:function (name) {
                    if(!name){
                        return
                    }
                    var selected_permit=ex.remove(this.permit_heads,function (head) {
                        return name==head.name
                    })
                    this.selected_heads=this.selected_heads.concat(selected_permit)
                },
                delet_permit:function (name) {
                    this.permit_heads = this.permit_heads.concat(ex.remove(this.selected_heads,function (head) {
                        return head.name==name
                    }))
                    Vue.delete(this.permits,name)

                },
//                submit:function () {
//                    var self=this;
//                    show_upload()
//                    var post_data=[{fun:'save_group_and_permit',row:this.kw.row,permits:this.permits}]
//                    $.post('/_ajax',JSON.stringify(post_data),function (data) {
//                        if(data.save_group_and_permit.errors){
//                            this.kw.errors=data.save_group_and_permit.errors
//                        }
//                        if(ex.parseSearch().next){
//                            location=decodeURIComponent(ex.parseSearch().next)
//                        }
//                        hide_upload(300)
//                    })
//                },
                cancel:function () {
                    location=document.referrer
//									var search =ex.parseSearch();
//									if(search.next){
//										location=atob(search.next)
//									}
                }
            },
        })
    })


</script>
<div id='there'>
    <path-nav :menu='menu'>
        <li><span>编辑</span></li>
    </path-nav>

    <div class="btn-group" style='float: right;'>
        <button name="test" type="button" class="btn btn-default" @click='submit()'>Save</button>
        <button name="test" type="button" class="btn btn-default" @click='cancel()'>Cancel</button>
    </div>


    <div class='field-panel' style='margin-top:5em;'>
        <field  :row="row" :head='get_head("name")'></field>
        <field  :row="row" :head='get_head("desp")'></field>
    </div>

    <div style="text-align: center;">
        <span style='width:100px;display: inline-block;text-align: right;margin-right:20px;'><b>可用权限:</b></span>
        <select name="" id="available_permit" v-model='sld_md_name' class="form-control">
            <option value="">---</option>
            <option v-for='item in permit_heads' :value="item.name" v-text='item.label'></option>
        </select>
        <button name="test" type="button" class='btn btn-default btn-sm' @click='add_permit(sld_md_name)'>添加</button>
    </div>



    <div  class='row'>
        <table class='table'>
            <tr :class='["permit-table",{"info":head.type!="model"}]' v-for='(head,index) in selected_heads'>
                <td style='width:200px;'>
			        	<span @click='delet_permit(head.name)' class='del_btn'>
				        	<i class="fa fa-trash" aria-hidden="true"></i>
				        </span>

                    <span v-text='head.label'></span>

                </td>
                <td >
                    <model-fields v-if='head.type=="model"' :fields='head.fields'
                                  v-model='permits[head.name]' :uni_name='index'></model-fields>
                    <special-fields v-else :fields='head.fields'
                                    v-model='permits[head.name]' :uni_name='index'></special-fields>
                </td>
            </tr>
        </table>

    </div>


</div>

<style type="text/css" media="screen" id="test">
    .row .col{
        display: inline-block;
        margin-left:10px;
    }
    .select_cell label{
        font-weight:normal;
    }
    #available_permit{
        min-width:100px;
        max-width:350px;
        display: inline-block;
    }
    .control-label{
        display: inline-block;
        text-align: right;
        margin-right:20px;
        width:100px;
    }
    .field_input{
        display: inline-block;
    }
    .row{
        margin: 20px 0px 0px 20px;
    }
    td{
        padding: 5px 10px;
    }

    .permit-table:nth-child(2n+1){
        background-color: #FDFDFD;
    }
    .del_btn{
        cursor: pointer;
        color: #FF0000;
    }
</style>

<script type="text/javascript">
    Vue.component('model-fields',{
        template:'#model-fields',
        props:['fields','value','uni_name'],
        data:function () {
            return {
                permit:this.value?this.value:[],
                first_row_mark_all:false,
                second_row_mark_all:false,
            }
        },
//        mounted:function(){
//            // 当数据库字段变少时，permit会变少，触发下面函数更新一下value，使得不用编辑，直接保存，就能修复
//          if(this.permit.length != this.value.length){
//              this.$emit('input',this.permit)
//          }
//        },
        watch:{
            permit:function (v) {
                this.$emit('input',v)
            },
            first_row_mark_all:function (v) {
                ex.remove(this.permit,function (item) {
                    return item.endsWith('__read') || ex.isin(item,['can__create','can__log'])
                })
                if(v){
                    this.permit= this.permit.concat(['can__create','can__log'])
                    this.permit=this.permit.concat(ex.map(this.fields,function (field) {
                        return field.name+'__read'
                    }))
                }
            },
            second_row_mark_all:function (v) {
                ex.remove(this.permit,function (item) {
                    return item.endsWith('__write') || ex.isin(item,['can__delete'])
                })
                if(v){
                    this.permit=this.permit.concat(['can__delete'])
                    this.permit=this.permit.concat(ex.map(this.fields,function (field) {
                        return field.name+'__write'
                    }))
                }
            },
        },
//        methods:{
//            clean:function(value){
//                var field_temp=ex.map(this.fields,function(field){
//                    return field.name
//                })
//                var field_names=["can__log","can__create","can__delete"]
//                ex.each(field_temp,function(name){
//                    field_names.push(name+'__read')
//                    field_names.push(name+'__write')
//                })
//                var out=ex.filter(value,function(key){
//                    return ex.isin(key,field_names)
//                })
////                for( key in value){
////                    if (ex.isin(key,field_names)){
////                        out.push(key)
////                    }
////                }
//                return out
//            }
//        }
    })
</script>

<template id='model-fields'>
    <table >
        <tr class='select_cell'>
            <td><span >快捷</span></td>
            <td><span >整表</span></td>
            <td><span>查看日志</span></td>
            <td v-for='field in fields'><span v-text='field.label'></span></td>
        </tr>
        <tr class='select_cell'>
            <td><input type="checkbox" name="test" value="" v-model='first_row_mark_all' /></td>
            <td><input type="checkbox" :id="uni_name+'can__create'" value="can__create" v-model='permit'/>
                <label :for="uni_name+'can__create'">创建</label>
            </td>
            <td><input type="checkbox" :id="uni_name+'can__log'" value="can__log" v-model='permit'/>
                <label :for="uni_name+'can__log'">允许</label>
            </td>
            <td v-for='field in fields'><input type="checkbox" :id="uni_name+field.name+'__read'"
                                               :value="field.name+'__read'" v-model="permit" />
                <label :for="uni_name+field.name+'__read'">读</label>
            </td>
        </tr>
        <tr class='select_cell'>
            <td><input type="checkbox" value='' v-model='second_row_mark_all'></td>
            <td><input type="checkbox" :id="uni_name+'can__delete'"  value='can__delete' v-model='permit'>
                <label :for="uni_name+'.can__delete'">删除</label>
            </td>
            <td></td>
            <td v-for='field in fields'><input type="checkbox" :id="uni_name+field.name+'__write'"
                                               :value="field.name+'__write'" v-model="permit">
                <label :for="uni_name+field.name+'__write'">写</label>
            </td>
        </tr>
    </table>
</template>

<script type="text/javascript">
    Vue.component('special-fields',{
        template:'#special-fields',
        props:['fields','value','uni_name'],
        data:function () {
            return {
                permit:this.value?this.value:[],

            }
        },
        watch:{
            permit:function (v) {
                this.$emit('input',v)
            },

        }
    })
</script>
<template id='special-fields'>
    <table>
        <tr>
            <td v-for='field in fields'><input type="checkbox" :id="uni_name+field.name"
                                               :value="field.name" v-model="permit" />
                <label :for="uni_name+field.name" v-text='field.label'></label>
            </td>
        </tr>
    </table>
</template>

<!--<script>-->
<!--Vue.component('group-field',{-->
<!--template:'#group-filed',-->
<!--props:['options'],-->
<!--data:function(){-->
<!--return {-->
<!--selected_group:[]-->
<!--}-->
<!--}-->
<!--})-->
<!--</script>-->
<!--<template id="group-field">-->
<!--<tow-col-sel v-model="selected_group" :choices='head.options'>-->

<!--</tow-col-sel>-->
<!--</template>-->
<script type="text/javascript">
    Vue.component('pure_form',{
        template:'#pure_form',
        props:['kw'],
        methods:{
            submit:function () {
                var self =this;
                show_upload()
                var post_data=[{fun:'save',row:this.kw.row}]
                $.post('',JSON.stringify(post_data),function (data) {
                    if(data.save.errors){
                        self.kw.errors = data.save.errors
                        hide_upload()
                    }else{
                        self.$dispatch('submit-success')
                        setTimeout(function () {
                            hide_upload()
                        }, 2000);
                    }

                })
            }
        },
        events:{
            'submit':function () {
                this.submit()
            }
        }
    })
</script>
<template id='pure_form'>
    <div>
        <field  v-for='head in kw.heads' :name='head.name' :kw='kw'></field>
    </div>
</template>
{% endblock %}